<template>
    <div class="sidebar">
        <div class="title">
            <a href="/">
                <img src="../../../assets/img/logo.png" />
                <span>选课系统</span>
            </a>
        </div>
        <side-list
            :sideData="sideData"
            :routerName="routerName"
            @changeRouter="changeRouter"
        >
        </side-list>
    </div>
</template>

<script>
    import SideList from './list'

    import sideData from '@/data/side';

    import { useStore } from 'vuex';
    import { onMounted, computed, watch } from 'vue';
    import { reactive } from 'vue';
    import { useRouter } from 'vue-router';

    export default {
        name: "Sidebar",
        components:{
            SideList
        },
        setup () {
            const store = useStore(),
                  state = store.state,
                  router = useRouter(),
                  data = reactive({
                    sideData
                  });

            const changeRouter = (text) => {
                switch (text) {
                    case '课程选择':
                        store.commit('setSideRouter', text);
                        router.push('/selection');
                        break;
                    case '已选课程':
                        store.commit('setSideRouter', text);
                        router.push('/course');
                        break;
                    default:
                        break;
                }

            }


            return {
                routerName: computed(() => state.sideRouter),
                ...data,
                changeRouter
            }
        }
    }
</script>

<style lang="scss" scoped>
    .sidebar{
        background-color: rgb(48, 65, 86);
        height: 100%;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1001;
        overflow: hidden;

        .title{
            display: inline-block;
            margin: 0;
            padding: 20px;
            color: #fff;
            font-weight: 600;
            line-height: 50px;
            font-size: 14px;
            vertical-align: middle;

            a {
                display: flex;
                height: 32px;
                color: white;

                img {
                    width: 32px;
                    height: 32px;
                    margin-right: 20px;
                }
                span {
                    line-height: 32px;
                }
            }

        }
    }
</style>